﻿@model IEnumerable<BTKERP.Model.Category>

@{
    ViewBag.Title = "Category";
    ViewBag.EnableSearch = false;
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section AdditionalJS
{
    <script type="text/javascript">
//        $(document).ready(function () {
//            var trs = $("#dt tr");
//            trs.each(function () {
//                $(this).bind("mouseover", function () {
//                    $(this).css("backgroundColor", "yellow");
//                }).bind("mouseout", function () {
//                    $(this).css("backgroundColor", "white");
//                });
//            });
        //        });

        $(document).ready(function () {
            $("#editForm").validate({
                rules: {
                    tname: { required: true, minlength: 1 }
                },
                messages: {
                    tname: { required: "Invalid Name", minlength: "Invalid Name" }
                }
            });
        });
        
        function add() {
            $("#tname").val("");
            $("#tdesc").val("");
            $("#editorTable").show();
        }

       function deleteItem(id) {
            if (confirm("Are you sure to delete?")) {
                $.ajax({
                    url: "/Category/Delete",
                    type: "POST",
                    data: "id=" + id,
                    success: function (data) {
                        if (data && data.result == "1") {
                            document.location.reload();
                        }
                        else {
                            this.error();
                        }
                    },
                    error: function () {
                        alert("Delete Failed! Please try again later!");
                    }
                });
            }
        }

        function edit(id) {
            $("#tid").val(id);
            $("#tname").val($.trim($("#name" + id).text()));
            $("#tdesc").val($.trim($("#desc" + id).text()));
            $("#editorTable").show();
        }

        function cancelEdit() {
            $("#editorTable").hide();
        }

        function saveChange() {
            if (!$("#editForm").valid()) {
                alert('sb');
                return; 
            }
            if (confirm("Are you sure to update?")) {
                var data = $("#editForm").serialize();
                $.ajax({
                    url: "/Category/Edit",
                    type: "POST",
                    data: data,
                    error: function () {
                        alert("Update Failed!");
                        cancelEdit();
                    },
                    success: function (data) {
                        if (data && data.result == "1") {
                            document.location.reload();
                        }
                        else {
                            this.error();
                        }
                    }
                });
            }
        }
    </script>

}
<h2>Category</h2>
 <input type="button" value="Create New" class="btn btn-green" onclick="add();"/>
<table id="dt" class="display stylized">
    <tr>
        <th>
            Name
        </th>
        <th>
            Description
        </th>
        <th></th>
    </tr>
@foreach (var item in Model) {
    <tr>
        <td id="@("name"+item.Id)">
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td id="@("desc"+item.Id)">
            @Html.DisplayFor(modelItem => item.Description)
        </td>

        <td>
            <a href="#" onclick="edit('@item.Id')">Edit</a>
            <a href="#" onclick="deleteItem('@item.Id')">Delete</a>
        </td>
    </tr>
}

</table>

<br />
<form id="editForm" name="editForm">
<input type="hidden" id="tid" name="tid" value="" />
<fieldset style="display:none" id="editorTable">
<legend>Edit Category</legend>
<table class="editor W500" >
    <tr>
        <td class="right W200">
            Name 
        </td>
        <td class="W400">
            <input type="text" id="tname" name="tname" value=""  class="W300"/>
        </td>
    </tr>
    <tr>
        <td class="right W200">
            Description 
        </td>
        <td class="W400">
            <input type="text" id="tdesc" name="tdesc" value="" class="W300" />
        </td>
    </tr>
    <tr>
        <td class="center" colspan="2">
            <input type="button" value="Update" class="btn btn-green" onclick="saveChange();"/>
            <input type="button" value="Cancel" class="btn btn-red" onclick="cancelEdit();" />
        </td>
    </tr>
</table>
</fieldset>
</form>

